<template>
  <div class="Clear">
    <div class="head">
      <van-nav-bar title="家政服务" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="classfiy">
      <span class="tips">服务类型</span>
      <van-cell is-link :title=title1 @click="onshow()" />
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    </div>
    <div class="timechoose">
      <span class="tips">预约时间</span>
      <van-cell is-link :title=title2 @click="onshow2()" />
      <van-popup v-model="show2" :style="{ width: '100%' }">
        <van-datetime-picker v-model="currentDate" @confirm="confirm" @cancel="cancel" type="datetime" title="选择时间" :min-date="minDate" :max-date="maxDate"/>
      </van-popup>
    </div>
    <div class="confirm">
      <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="confirm1">
        申请预约
      </van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, ActionSheet, Cell, Calendar, DatetimePicker, Popup, Button, Toast } from 'vant'
Vue.use(NavBar).use(ActionSheet).use(Cell).use(Calendar).use(DatetimePicker).use(Popup).use(Button).use(Toast)
export default{
  name: 'Clear',
  data () {
    return {
      title1: '请选择需要预约的服务',
      show: false,
      actions: [{ name: '保洁' }, { name: '保姆' }],
      title2: '请选择需要预约的时间',
      show2: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    }
  },
  methods: {
    // 返回首页
    onClickLeft () {
      this.$router.push('/Home')
    },
    onshow () {
      this.show = true
    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      this.title1 = item.name
    },
    onshow2 () {
      this.show2 = true
    },
    confirm (item) {
      var getYear = item.getFullYear() + '-' + (item.getMonth() + 1) + '-' + item.getDate() + ' ' + item.getHours() + ':' + item.getMinutes()
      this.show2 = false
      this.title2 = getYear
    },
    cancel () {
      this.show2 = false
    },
    confirm1 () {
      if (this.title1 === '请选择需要预约的服务') {
        Toast('请选择需要预约的服务')
      } else if (this.title2 === '请选择需要预约的时间') {
        Toast('请选择需要预约的时间')
      } else {
        this.title1 = '请选择需要预约的服务'
        this.title2 = '请选择需要预约的时间'
        Toast('成功预约')
      }
    }
  }
}
</script>

<style scoped>
.classfiy, .timechoose{
  margin-bottom: 10px;
  text-align: left;
}
.tips{
  margin-left: 18px;
}
</style>
